{include file="public/head"/}
<style>
    .contact {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        padding-bottom: 0 !important;
    }

</style>
<script language="javascript">
    $(document).ready(function () {
        $("#tab-base").click(function () {
            $("#table-base").show();
            $("#table-more").hide();
            $("#table-linkman").hide();
            $("#table-bank").hide();
        });

        $("#tab-more").click(function () {
            $("#table-base").hide();
            $("#table-more").show();
            $("#table-linkman").hide();
            $("#table-bank").hide();
        });

        $("#tab-linkman").click(function () {
            $("#table-base").hide();
            $("#table-more").hide();
            $("#table-linkman").show();
            $("#table-bank").hide();
        });

        $("#tab-bank").click(function () {
            $("#table-base").hide();
            $("#table-more").hide();
            $("#table-linkman").hide();
            $("#table-bank").show();
        });

        $("#table-base").show();
        $("#table-more").hide();
        $("#table-linkman").hide();
        $("#table-bank").hide();

    })
</script>


<div class="container-fluid" id="main">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
        </div>
    </div>
    <input type="hidden" id="act" name="act" value="{$str}">
    <input type="hidden" name="company_id" id="company_id" value="{$company_id|default=''}">
    <input type="hidden" name="country_id" id="country_id" value="{$country_id|default=''}">

    <div class="ntDesktop">
        <div class="ntDesktop-head">{:lang("add/edit_custmer's_company")}</div>

        <div class="row clearfix" style="padding-top:0px">
            <div class="col-md-8 col-sm-8">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#" data-toggle="tab" id="tab-base">{:lang('summary')}</a></li>
                    <li><a href="#" data-toggle="tab" id="tab-more">{:lang('more_information')}</a></li>
                    <li @click="getlinkfun"><a href="#" data-toggle="tab" id="tab-linkman">{:lang('contact')}</a></li>
                    <li @click="getbank"><a href="#" data-toggle="tab" id="tab-bank">{:lang('bank_account')}</a></li>
                </ul>
            </div>
            <div class="col-md-4 col-sm-4 text-right">
                <div>
                    <button type="button" class="btn btn-default" @click="returnlist">
                    <span class="glyphicon glyphicon-chevron-left"></span>{:lang('back_to_list')}
                    </button>
                    <span style="padding:10px">&nbsp;</span>
                    <a href="javascript:;" @click="subfun" class="btn btn-primary"
                       style="padding-left:48px;padding-right:48px;"> <span
                            class="glyphicon glyphicon-floppy-disk"></span> {:lang('save')} </a>
                </div>
            </div>
        </div>


        <!-- 概要页面 -->
        <div class="row clearfix" id="table-base">
            <div class="col-md-12 column">
                <table class="table table-striped table-hover ntTable" v-cloak>
                    <tbody>
                    <tr>
                        <td>{:lang('company_type')}<span class="required"></span></td>
                        <td>
                            <select class="form-control" v-model="data.type_id" @change="changegsfun">
                                <option value="">{:lang('please_select')}</option>
                                <option :value="item.id" v-for="(item,index) in cotypename">{{item.content}}</option>
                            </select>
                        </td>
                        <td>{:lang('belongs_to_seller')}<span class="required"></span></td>
                        <td>
                            <select class="form-control" v-model="data.saler_id">
                                <option value="">{:lang('please_select')}</option>
                                <option :value="item.id" v-for="(item,index) in managename">{{item.nickname}}</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>{:lang('company_name')}<span class="required"></span></td>
                        <td colspan="3">
                            <input type="text" class="form-control" v-model="data.name">
                        </td>
                    </tr>
                    <tr>
                        <td>{:lang('address')}<span class="required"></span></td>
                        <td colspan="3">
                            <div class="col-md-2">
                                <select class="form-control col-md-2" v-model="data.address.country_id"
                                        @change="selchangefun('provinces',data.address.country_id,'provinces')">
                                    <option value="">{:lang('please_select')}</option>
                                    <option :value="item.id" v-for="(item,index) in countryname">{{item.name}}</option>
                                </select>
                            </div>

                            <div class="col-md-4">
                                <select class="form-control" v-model="data.address.province_id"
                                        @change="selchangefun('city',data.address.province_id,'city')">
                                    <option selected>{:lang('please_select')}</option>
                                    <option :value="item.id" v-for="(item,index) in provinces">{{item.name}}</option>
                                </select>
                            </div>

                            <div class="col-md-3">
                                <select class="form-control" v-model="data.address.city_id"
                                        @change="selchangefun('town',data.address.city_id,'town')">
                                    <option selected>{:lang('please_select')}</option>
                                    <option :value="item.id" v-for="(item,index) in city">{{item.name}}</option>
                                </select>
                            </div>

                            <div class="col-md-3">
                                <select class="form-control" v-model="data.address.town_id">
                                    <option selected>{:lang('please_select')}</option>
                                    <option :value="item.id" v-for="(item,index) in town">{{item.name}}</option>
                                </select>
                            </div>

                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td colspan="3">
                            <input type="text" class="form-control" v-model="data.addr">
                        </td>
                    </tr>
                    <tr>
                        <td>{:lang('ZIP_CODE')}<span class="required"></span></td>
                        <td>
                            <input type="text" class="form-control" v-model="data.zipcode">
                        </td>
                        <td>{:lang('status')}</td>
                        <td>
                            <label class="radio-inline">
                                <input type="radio" name="optionsRadioinline" value="NORMAL"
                                       @click="changestatus('NORMAL')" :checked="data.statuss=='NORMAL'"> {:lang('normal')}
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="optionsRadioinline" value="DRAFT"
                                       @click="changestatus('DRAFT')" :checked="data.statuss=='DRAFT'"> {:lang('draft')}
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="optionsRadioinline" value="LOCK" @click="changestatus('LOCK')"
                                       :checked="data.statuss=='LOCK'"> {:lang('locking')}
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="optionsRadioinline" value="DEL" @click="changestatus('DEL')"
                                       :checked="data.statuss=='DEL'"> {:lang('delete')}
                            </label>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 详细资料页面 -->
        <div class="row clearfix" id="table-more">
            <div class="col-md-12 column">
                <table class="table table-striped table-hover ntTable">
                    <tbody>
                    <tr>
                        <td>{:lang('number_of_employees')}</td>
                        <td>
                            <select class="form-control" v-model="data.works">
                                <option value="">{:lang('please_select')}</option>
                                <option :value="key" v-for="(item,key,index) in number">{{item}}</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>{:lang('remark')}</td>
                        <td><textarea class="form-control" v-model="data.remarks" style="resize: none;">{{data.remarks}}</textarea></td>
                    </tr>
                    <tr v-for="(item,index) in attrarr.text">
                        <td>{{item.content}}</td>
                        <td><input type="text" class="form-control" v-model="data.attrval.text[index].val"
                                   placeholder="{:lang('please_enter_content')}"></td>
                    </tr>
                    <tr v-for="(item,index) in attrarr.select">
                        <td>{{item.content}}</td>
                        <td>
                            <select class="form-control" v-model="data.attrval.select[index].val">
                                <option value="0">{:lang('please_select')}</option>
                                <option :value="val.id" v-for="(val,key) in item.textselect">{{val.content}}</option>
                            </select>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 联系人页面 -->
        <div id="table-linkman">
            <div class="row clearfix" id="table-linkman">
                <div class="col-md-12 column text-right">
                    <a href="{:url('customer/liaisonadd')}" type="button" class="btn btn-primary" data-toggle="modal"
                       data-target="#linkman_Modal"><span class="glyphicon glyphicon-plus"></span> {:lang('add_new_contact')} </a>
                </div>
            </div>
            <div class="row clearfix" id="table-linkman">
                <div class="col-md-12 column">
                    <table class="table table-striped table-hover ntTable" v-cloak>
                        <thead>
                        <tr>
                            <th>No.</th>
                            <th>{:lang('name')}</th>
                            <th>{:lang('main')}</th>
                            <th>{:lang('gender')}</th>
                            <th>{:lang('contact_information')}</th>
                            <th>{:lang('edit')}</th>
                            <th>{:lang('operate')}</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in linkarr">
                            <td align="center">{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td align="center">{{item.ismans}}</td>
                            <td align="center">{{item.sex}}</td>
                            <td v-html="item.contact" :title="item.contact" class="contact">
                            </td>
                            <td>{{item.updatename}}<br/>
                                <small>{{item.update_date}}</small>
                            </td>
                            <td class="text-right">
                                <div>
                                    <a :href="'/admin/Customer/liaisonedit?linkid='+item.id"
                                       type="button" class="btn btn-sm btn-primary" data-toggle="modal"
                                       data-target="#linkman_Modal"><span
                                            class="glyphicon glyphicon-pencil"></span>{:lang('edit')}</a>
                                    <a href="javascript:;" @click.prevent="dellink(item.id,index)"
                                       class="btn btn-sm btn-default"><span
                                            class="glyphicon glyphicon-trash"></span>{:lang('delete')}</a>
                                </div>
                            </td>
                        </tr>
                        <tr style="text-align: center;"  v-if="linkarr.length==0">
                                <td colspan="7">{:lang('no_data')}</td>
                            </tr>
                        </tbody>
                    </table>
                    <ul class="pagination" id="paginationlink">
                    </ul>
                </div>
            </div>
        </div>
        <div id="table-bank">
            <div class="row clearfix" id="table-linkman">
                <div class="col-md-12 column text-right">
                    <a href="{:url('customer/bankadd')}" type="button" class="btn btn-primary" data-toggle="modal"
                       data-target="#bank_Modal"><span class="glyphicon glyphicon-plus"></span> {:lang('add_new_account')}</a>
                </div>
            </div>
            <div class="row clearfix" id="table-linkman">
                <div class="col-md-12 column">
                    <table class="table table-striped table-hover ntTable" v-cloak>
                        <thead>
                        <tr>
                            <th>{:lang('serial_number')}</th>
                            <th>{:lang('bank')}</th>
                            <th>{:lang('account_opening_bank_branch')}</th>
                            <th>{:lang('account_name')}</th>
                            <th>{:lang('account')}</th>
                            <th>{:lang('main')}</th>
                            <th>{:lang('edit')}</th>
                            <th>{:lang('operate')}</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in bankarr">
                            <td align="center">{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.bankname}}</td>
                            <td>{{item.account_name}}</td>
                            <td>{{item.account_num}}</td>
                            <td align="center">{{item.ismans}}</td>
                            <td>{{item.updatename}}<br/>
                                <small>{{item.update_date}}</small>
                            </td>
                            <td class="text-right">
                                <div>
                                    <a :href="'/admin/Customer/bankedit?bankid='+item.id"
                                       class="btn btn-sm btn-primary" data-toggle="modal"
                                       data-target="#bank_Modal"><span class="glyphicon glyphicon-pencil"></span>{:lang('edit')}</a>
                                    <a href="javascript:;" @click.prevent="delbank(item.id,index)"
                                       type="button" class="btn btn-sm btn-default"><span
                                            class="glyphicon glyphicon-trash"></span>{:lang('delete')}</a>
                                </div>
                            </td>
                        </tr>
                        <tr style="text-align: center;"  v-if="bankarr.length==0">
                                <td colspan="8">{:lang('no_data')}</td>
                            </tr>
                        </tbody>
                    </table>
                    <ul class="pagination" id="paginationbank">
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>



<!-- 返回列表弹框 -->
<div class="modal fade" tabindex="-1" id="breaklist" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">{:lang('notice')}</h4>
            </div>
            <div class="modal-body">
                <p>{:lang('do_you_still_have_unsaved_data_to_confirm_return？')}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{:lang('cancel')}</button>
                <button type="button" class="btn btn-primary savebtn">{:lang('confirm')}</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


<!--添加弹窗部分 开始-->
<div class="modal fade" id="linkman_Modal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel"
     aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- {:lang('bank_account')} -->

<div class="modal fade" id="bank_Modal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script src="/static/Admin/js/companyinfo.js"></script>
{include file="public/foot"/}
<script>
    $("#linkman_Modal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        // $(".modal-content").children().remove();
    });
    $("#bank_Modal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        // $(".modal-content").children().remove();
    });
</script>